import React, { memo } from "react";
import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";
import { nanoid } from "nanoid";
import { UserWrapper } from "./style";
import { setOtherUserInfoAction } from "@/pages/other-user/store/actionCreators";

export default memo(function User(props) {
  const { data } = props;
  const history = useHistory();
  const dispatch = useDispatch();
  const jumpToThisUser = (data) => {
    history.push({
      pathname: "/other_user",
      state: data,
    });
    dispatch(setOtherUserInfoAction(data));
  };
  return (
    <UserWrapper>
      {data.map((item) => {
        return (
          <div
            key={nanoid()}
            className="item-wrapper"
            onClick={(e) => {
              jumpToThisUser(item);
            }}
          >
            <img className="avatar" src={item.avatar} alt="" />
            <div className="right">
              <div className="nickName">{item.nickName}</div>
              <div className="userName">
                小柚号: {item.userId.substring(0, 10)}
              </div>
              <div className="other">
                <span>获赞数: {item.allLove}</span>
                <span> | </span>
                <span>
                  {item.schoolId === "SWPU666" ? "西南石油大学" : "未认证"}
                </span>
              </div>
            </div>
          </div>
        );
      })}
    </UserWrapper>
  );
});
